<template>
    <view :class="isIpx ? 'ipx_button' : ''" class="bot-btn" :style="{background:bgColor,position:isFixed?'fixed':''}">
        <view class="my_button" :class="isIpx? 'iphonex-button' : ''" @click="sendFun">{{text}}</view>
    </view>
</template>
<script>
export default {
    name: "bottom-button",
    data() {
        return {
            isIpx: false
        }
    },
    props: {
        text: {
            type: String,
            default: '提交'
        },
        bgColor: {
            type: String,
            default: 'transparent'
        },
        isFixed:{
          type:Boolean,
          default:false
        }
    },
    mounted() {
        //判断设备是否为 iPhone
        const self = this
        uni.getSystemInfo({
            success: (res) => {
                console.log(res)
                if (['iPhone X', 'iPhone XR', 'iPhone XS Max', 'iPhone 11', 'iPhone 11 Pro', 'iPhone 11 Pro Max'].includes(res.model)) {
                    this.isIpx = true
                }
            }
        })
    },
    methods: {
        sendFun() {
            this.$emit('sendFun')
        }
    }
}
</script>
<style  lang="scss">
    /* components/my-tab/my-tab.wxss */

    /* 正常手机按钮 */
    .bot-btn {
        padding: 30rpx;
        // position: fixed;
        bottom: 0;
        width:100%;
        box-sizing: border-box;
        z-index: 99;
        left: 0;
    }
    .my_button {
        border-radius: 10rpx;
        font-size: 36rpx;
        line-height: 98rpx;
        background: #3A92FF;
        text-align: center;
        color: #fff;
    }

    /* iphone X按钮 */

    .ipx_button {
        width: 100%;
        // background: #fff;
        padding-bottom: 68rpx;
        box-sizing: border-box;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 888;
    }

    .iphonex-button {
        bottom: 68rpx !important;
    }
</style>